<template>
	<view class="detail-ap">
		<view class="tabList">
			<v-tabs v-model="tabCurrent" :scroll="false" :tabs="tabList" @change="tabChange" ></v-tabs>
		</view>
		<view class="main">
			<view class="mian-title" :style="{'height': detailList.isClosed==0 ?'196rpx':'96rpx'}" >
				<view class="xq_title">停车场地申报 </view>
				<view class="xq_type" v-if="detailList.isClosed==0" >
					当前节点：{{nodeName}}
				</view>
				<view class="" style="padding: 36rpx;" v-if="detailList.isClosed==0" >
					<steps :steps="numList2" :current="1"></steps>
					<!-- <u-steps :list="numList2" :current="1" mode="dot"></u-steps> -->
				</view>
			</view>
			<swiper :current="tabCurrent" style="height: 1280rpx;" @change="changesw" >
				<swiper-item class="swiper-item" >
			<view class="forms">
				<view class="Category_title">
					<view class="line"></view>停车场场地信息
				</view>
				<view class="items">
					<view class="field">
						申请人
					</view>
					<view class="content">
						{{detailmsg.applicant || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						联系方式
					</view>
					<view class="content">
						{{detailmsg.applicantPhone || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						身份证
					</view>
					<view class="content">
						{{detailmsg.applicantIdentityCard || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						所属街镇
					</view>
					<view class="content">
						{{detailmsg.street || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						停车场地址
					</view>
					<view class="content">
						{{detailmsg.address || '暂无' }}
					</view>
				</view>
				<view class="items" @click="navigationToEvent">
					<view class="field">
						四至范围
					</view>
					<img class="arrow" src="/static/arrow.png">
				</view>
				<view class="items">
					<view class="field"> 可用停车位数量 </view>
					<view class="content">
						{{ detailmsg.availableDigits|| "暂无" }}
					</view>
				</view>
				<view class="items">
					<view class="field"> 负责人 </view>
					<view class="content">
						{{ detailmsg.leadingCadre || "暂无" }}
					</view>
				</view>
				<view class="items">
					<view class="field"> 负责人联系方式 </view>
					<view class="content">
						{{ detailmsg.leadingCadrePhone ||"暂无" }}
					</view>
				</view>
				<view class="items">
					<view class="field"> 停车场名称 </view>
					<view class="content">
						{{ detailmsg.name || "0" }}
					</view>
				</view>
				<view class="items">
					<view class="field"> 备注</view>
					<view class="content">
						{{ detailmsg.remarks || "暂无" }}
					</view>
				</view>
				<view class="Category_title">
					<view class="line"></view>附件信息
				</view>
				<view class="items" style="flex-direction: column;">
					<view class="" style="display: flex;">
						<view class="field" style="width: 400rpx;">
							出口道路硬化
						</view>
					</view>
					<view class="" style="display: flex;">
						<view class="field" v-for="item  in detailmsg.accessRoadSclerosis ">
							<view class="showpdf">
								<img class="pho" :src="item" alt="">
							</view>
						</view>
						<u-upload :action="action" :auto-upload="true" @on-success='upsuccess' v-if="checkop==1">
						</u-upload>
					</view>
				</view>
				<view class="items" style="flex-direction: column;">
					<view class="" style="display: flex;">
						<view class="field" style="width: 400rpx;">
							冲洗设备
						</view>
					</view>
					<view class="" style="display: flex;">
						<view class="field" v-for="item  in detailmsg.accessRoadSclerosis ">
							<view class="showpdf">
								<img class="pho" :src="item" alt="">
							</view>
						</view>
						<u-upload :action="action" :auto-upload="true" @on-success='upsuccess' v-if="checkop==1">
						</u-upload>
					</view>
				</view>
				<view class="items" style="flex-direction: column;">
					<view class="" style="display: flex;">
						<view class="field" style="width: 400rpx;">
							视频
						</view>
					</view>
					<view class="" style="display: flex;">
						<view class="field" v-for="item  in detailmsg.accessRoadSclerosis ">
							<view class="showpdf">
								<img class="pho" :src="item" alt="">
							</view>
						</view>
						<u-upload :action="action" :auto-upload="true" @on-success='upsuccess' v-if="checkop==1">
						</u-upload>
					</view>
				</view>
				<view class="items" v-if="buttontype==2">
					<view class="road_field" style="width: 500rpx;">建议路线：</view>

					<!-- <label class="radio">
							<radio value="r1" checked="true" />
						</label> -->

				</view>
				<view class="map_box" v-if="buttontype==2">
					<map id="navi_map" longitude="119.970882" latitude="30.539185" scale="13" @tap='addmarker'
						:markers="markers" :polygon='polygon' :polyline="polyline"></map>
				</view>
			</view>
				</swiper-item>
				<swiper-item class="swiper-item" >
			<circullog :ids="idd" :nodeName='nodeName'  v-if="tabCurrent==1"></circullog>
			</swiper-item>
			</swiper>
		</view>
		<u-popup v-model="show" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop">
				<view class="title">
					<view class="" @click="show=false">
						取消
					</view>
					<view class="">
						{{outorder==1 ? '不通过' :outorder== 2? '退单整改': '审核' }}
					</view>
					<view class="" style="color: #007AFF;" @click="comfirm">
						确认
					</view>
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx ">
					<u-input :enableNative="false" style="" v-model="type_value" :type="type" :border="border"
						:height="height" placeholder="请填写审核意见" />
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showpart" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop">
				<view class="title">
					<view class="" @click="showpart = false"> 取消 </view>
					<view class="">
						{{ buttontype == 10 ? "请选择参与部门" : "分派处置" }}
					</view>
					<view class="" style="color: #007aff" @click="comfirm_part">
						确认
					</view>
				</view>
				<view class="checkbox-group" v-if="buttontype == 10">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
							shape="circle" size="45rpx" :key="index" :name="item.orgId">{{ item.orgName }}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="" style="margin: 50rpx 20rpx 50rpx 20rpx" v-else>
					<u-input style="" v-model="type_value" :type="type" :border="border" :height="height"
						placeholder="请填写审核意见" />
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
		<view class="footer">
			<view class="" v-show="cricul==0">
				<button class="taketask" v-if="orderType == 0" type="default" @click="taketask">
					任务认领
				</button>
				<view class="footer" v-else>
					<!-- 1.是否通过 -->
					<view class="footer" v-if="buttontype == 10">
						<button class="cancel" type="default" @click="passout">关闭工单</button>
						<button class="confim" type="default" @click="showpart = true">
							分派部门
						</button>
					</view>
					<view class="footer" v-else-if="buttontype==11">
						<button class="heyan" type="default" @click="canceltake">取消认领</button>
						<button class="heyan" type="default" @click="passout(1)">不通过</button>
						<button class="heyan" type="default" @click="passout(2)">退单整改</button>
						<button class="heyan" type="default" @click="comfirm_part">通过</button>
					</view>
					<view class="footer" v-else-if="buttontype == 6">
						<button class="taketask" type="default" @click="passout(1)">
							关闭工单
						</button>
					</view>
					<view class="footer" v-else>
						<button class="cancel" type="default" @click="passout(1)">关闭工单</button>
						<button class="confim" type="default" @click="comfirm_part">
							通过
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getWorkOrderLogs,
		getTakeTask,
		postOrderHandle,
		orgByNodeId,
		allocate,
		allocatedo,
		getPdf,
		detailById,
		postWithdraw,
		postOrderAudit,
		getTransferDepartment,
		getNextPersons,
		postOrderDispatch,
		postCloseOrder,
		postCheck,
		getMyList,
		allocatepostWithdraw,
		allocatepostCloseOrder
	} from "@/pages/api/orderp/orderp.js";
	import {
		getByOrdersId
	} from '@/pages/api/report/orderp.js'
	import {
		uploadUrl
	} from "@/pages/api/report/helperOrderp.js";
	import circullog from '@/pages/index/approval/circulLog/index'
	import steps from '@/components/orderStep/orderStep.vue'
	export default {
		components: {
			circullog,
			steps
		},
		data() {
			return {
				id: "",
				detailList: {},
				timeLeft: "",
				formarr: [],
				getphotolist: [],
				chuzhiphotolist: [],
				circulList: [],
				chuzhiarr: [],
				show: false,
				showpart: false,
				closeable: false,
				type: "textarea",
				autoup: false,
				border: true,
				height: 240,
				type_value: "",
				border_radius: "30rpx",
				orderType: "",
				nodeId: "",
				list: [],
				activelist: [],
				flag: false,
				idd: "",
				buttontype: 0,
				list_1: [{
						name: "是",
						disabled: false,
					},
					{
						name: "否",
						disabled: false,
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: "orange",
				outorder: 0,
				polyline: [],
				detailmsg: {},
				action: 'http://172.21.188.5:8085/zhatu/file/upload',
				fileList: [],
				nodeName: '',
				polygon: [],
				points: [],
				tabList: ['审核详情', '审核历史'
				],
				tabCurrent: 0,
				nodeName: '',
				cricul: 0,
				numList2: [{
					name: '提交申请'
				}, {
					name: '部门审核'
				}],
			};
		},
		onBackPress(event) {
			console.log(event)
			uni.redirectTo({
				url: '/pages/index/approval/index'
			})
		},
		onLoad(op) {
			this.id = op.id;
			this.nodeId = op.nodeId;
			this.flag = op.flag;
			this.idd = op.idd;
			this.nodeName = op.nodeName
			this.cricul = op.currenttab

		},
		mounted() {
			uni.showLoading({
				title: "加载中",
			});

			setTimeout(function() {
				uni.hideLoading();
			}, 2000);
			this.getolddetail()
			this.getdetail()
			this.getorgByNodeId()
		},
		methods: {
			changesw(e){
				console.log(e)
				this.tabCurrent = e.detail.current
			},
			tabChange(index) {
				this.tabCurrent = index
			},
			//上传成功回调
			upsuccess(res, b, c) {
				console.log(res, b, c)
			},
			//获取分配部门
			getorgByNodeId() {
				orgByNodeId({
					nodeId: this.nodeId,
				}).then((res) => {
					res.forEach((d) => {
						this.list.push({
							nodeId: d.nodeId,
							orgId: d.orgId,
							orgName: d.orgName,
							checked: false,
							disabled: false,
						});
					});
					console.log(res, 9999999, this.nodeId);
				});
			},
			getolddetail() {
				return new Promise((resolve, reject) => {
					getByOrdersId({
						ordersId: this.idd
					}).then(res => {
						console.log(res, 333)
						this.detailmsg = res
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			getdetail() {
				return new Promise((resolve, reject) => {
					getOrderDetail({
							id: this.id,
						})
						.then((res) => {
							console.log(res);
							this.detailList = res;
							if (this.detailList.type == 10) {
								this.orderType = 2;
							} else if (this.detailList.type == 11) {
								this.orderType = 3;
							} else {
								this.orderType = this.detailList.orderType;
							}

							this.timeLeft = parseInt(this.detailList.timeLeft / 60);
							if (this.detailList.timeLeft > 3600) {
								this.timeLeft =
									parseInt(this.timeLeft / 60) +
									"时" +
									(this.timeLeft % 60) +
									"分";
							} else {
								this.timeLeft = (+this.timeLeft % 60) + "分";
							}

							this.buttontype = this.detailList.type;
							this.detailList.formValue.forEach((d) => {
								this.formarr.push({
									display_name: d.display_name,
									value: d[d.name],
								});
							});
							if (this.buttontype == 10) {
								//自动分配部门
								// allocate({
								// 	id: this.id,
								// 	orgIds: ["GO_df2f46315d414518a31bea909fbd67a6"],
								// 	other: {
								// 		result: "工单分配",
								// 		content: "工单分配"
								// 	}
								// }).then(res => {
								// 	console.log('分配成功'+res)
								// 	this.buttontype=11

								// })
							}
							resolve(res);
						})
						.catch((err) => {
							reject(err);
						});
				});
			},
			//预览图片
			previewPic(e) {
				var current = e.target.dataset.src;
				this.getphotolist.length = 0;
				this.formarr.forEach((d) => {
					if (d.display_name == "招标信息") {
						d.value.forEach((p) => {
							this.getphotolist.push(p.url);
						});
					}
				});
				uni.previewImage({
					current: current,
					urls: this.getphotolist,
				});
			},
			//确认审核
			comfirm() {
				if (this.outorder != 0) {
					uni.showModal({
						title: "提示",
						content: "是否确定提交审核？",
						confirmText: "确定",
						cancelText: "取消",
						success: (res) => {
							if (res.confirm) {
								if (this.outorder == 1) {
									allocatepostCloseOrder({
										id: this.id,
										other: {
											result: "关闭",
											content: "关闭",
										},
									}).then((res) => {
										this.$refs.uToast.show({
												title: "关闭成功",
												type: "success",
											},
											500
										);
										setTimeout(() => {
											uni.$emit("updatelist", 10);
											uni.navigateBack();
										}, 500);
									});
								} else if (this.outorder == 2) {
									allocatepostWithdraw({
										id: this.id,
										other: {
											result: "退单整改",
											content: this.type_value,
										},
									}).then((res) => {

										uni.$emit("updatelist", 10);
										this.$refs.uToast.show({
												title: "关闭工单成功",
												type: "success",
											},
											500
										);
										uni.navigateBack();

									});
								}

							}
						},
					});
				}
			},
			//任务认领
			taketask() {
				getTakeTask({
					id: this.id,
				}).then((res) => {
					this.orderType = 1;
					console.log(res);
				});
			},
			checkboxChange(e) {
				console.log(e);
				if (e.value) {
					this.activelist.push(e.name);
				} else {
					this.activelist.pop();
				}
			},

			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
			},
			// 全选
			checkedAll() {
				this.list.map((val) => {
					val.checked = true;
				});
			},
			//关闭工单
			passout(index) {
				this.show = true;
				this.outorder = index;
			},
			comfirm_part() {
				uni.showModal({
					title: "提示",
					content: "是否确定提交？",
					confirmText: "确定",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							if (this.buttontype == 11) {
								allocatedo({
										id: this.id,
										formValue: [{
											name: "orderName",
											type: "text",
											params: {},
											display_name: "分派处置内容",
											orderName: this.type_value,
										}, ]
									})
									.then((d) => {
										console.log(d);

										this.show = false;
										this.$refs.uToast.show({
												title: "处置成功",
												type: "success",
											},
											300
										);
										setTimeout(() => {
											uni.$emit("updatelist", 10);
											uni.navigateBack();
										}, 300);
									})
									.catch((e) => {
										console.log(e);
									});
							} else if (this.buttontype == 10) {
								//自动分配部门
								allocate({
									id: this.id,
									orgIds: this.activelist,
									other: {
										result: "工单分配",
										content: "工单分配"
									}
								}).then(res => {
									console.log('分配成功' + res)
									this.buttontype = 11

								})
							}
						}
					},
				});

				console.log(this.activelist);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.detail-ap {
		height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.main {
			flex: 1;
			width: 750rpx;
			background-color: #f2f3f5;
			overflow-x: hidden;

			.mian-title {
				margin-top: 80rpx;
				padding: 32rpx;
				height: 196rpx;
				width: 718rpx;
				background-color: #ffffff;

				.xq_title {
					font-weight: 600;
					font-size: 40rpx;
					color: #363a44;
					margin-bottom: 24rpx;
				}

				.xq_type {
					font-size: 28rpx;
					color: #b5b7ba;
				}
			}

			.forms {
				// margin-top: 22rpx;
				padding: 26rpx 32rpx 26rpx 0rpx;
				width: 750rpx;
				background-color: #ffffff;
				border-radius: 10rpx;

				.Category_title {
					display: flex;
					font-weight: 600;
					font-size: 32rpx;
					color: #428ffc;
					height: 92rpx;
					background-color: #f6f7f8;
					line-height: 100rpx;
					padding-left: 32rpx;

					.line {
						height: 32rpx;
						margin: 32rpx 16rpx 0 0;
						width: 4rpx;
						background-color: #428ffc;
					}
				}

				.items {
					display: flex;
					padding: 26rpx 0 26rpx 0;
					font-size: 32rpx;
					margin-left: 32rpx;
					margin-right: 32rpx;
					border-bottom: 2rpx solid #e8e9ec;

					.road_field {
						width: 422rpx;
						color: #363a44;
						margin-right: 524rpx;
					}

					.field {
						width: 192rpx;
						color: #b3b5b9;
						margin-right: 32rpx;

						.showpdf {
							margin-top: 16rpx;
							height: 200rpx;
							width: 200rpx;
							border: 1rpx solid #e8e9ec;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.pdf {
								height: 128rpx;
								width: 104rpx;
							}
						}
					}

					.content {
						width: 440rpx;
						color: #363a44;
					}
				}

				.line {
					height: 5rpx;
					background-color: #f2f3f5;
				}
			}

			.circul {
				display: flex;
				margin-left: 22rpx;
				margin-bottom: 40rpx;
				width: 750rpx;

				.type {
					margin-top: 22rpx;
					height: 50rpx;
					width: 50rpx;
					background-color: #2979ff;
					color: #ffffff;
					font-size: 31rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 50rpx;
				}

				.circul_content {
					padding: 22rpx;
					margin-left: 22rpx;
					background-color: #ffffff;
					width: 588rpx;
					border-radius: 10rpx;

					.circul_field {
						margin-top: 22rpx;
					}
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			width: 750rpx;
			height: 128rpx;
			background-color: #ffffff;
			font-size: 29rpx;
			box-shadow: 2rpx 0 6rpx rgba(0, 0, 0, 0.12), 0 0 6rpx rgba(0, 0, 0, 0.04);

			.heyan {
				height: 87rpx;
				width: 170rpx;
				border: 1rpx solid #428FFC;
				border-radius: 20rpx;
				font-size: 25rpx;
				color: #FFFFFF;
				background-color: #428FFC;
				margin-top: 14rpx;
				// margin-right: 5rpx;
				margin-left: 12rpx;
			}

			.cancel {
				height: 87rpx;
				width: 339rpx;
				border: 1rpx solid #428ffc;
				border-radius: 50rpx;
				color: #428ffc;
				margin-top: 14rpx;
				// margin-left: 32rpx;
			}

			.confim {
				height: 87rpx;
				width: 339rpx;
				border: 1rpx solid #428ffc;
				border-radius: 50rpx;
				background-color: #428ffc;
				color: #ffffff;
				margin-top: 14rpx;
				margin-left: 16rpx;
			}

			.taketask {
				height: 87rpx;
				width: 692rpx;
				line-height: 87rpx;
				border: 1rpx solid #428ffc;
				border-radius: 50rpx;
				background-color: #428ffc;
				color: #ffffff;
				margin-top: 14rpx;
			}
		}
	}

	.pop {
		height: 950rpx;
		border-radius: 20rpx;

		.pop_title {
			color: #363a44;
			font-size: 32rpx;
			padding: 40rpx 0 32rpx 32rpx;
			border-bottom: 1rpx solid #efefef;
		}

		.title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.checkbox-group {
			padding: 20rpx;
		}
	}

	img {
		height: 116rpx;
		width: 116rpx;
		margin-right: 20rpx;
	}

	.u-tr {
		height: 112rpx;
	}

	#navi_map {
		height: 650rpx;
	}

	.map_box {
		height: 650rpx;

	}

	.tabList {
		height: 80rpx;
		width: 750rpx;
		z-index: 99;
		position: fixed;
		top: 0rpx;
		background-color: #FFFFFF;
		border-bottom: .5rpx solid #DBDBDB;
	}

	.arrow {
		margin-left: 400rpx;
		height: 30rpx;
		width: 30rpx;
	}
</style>
